const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

const FALL_ICON = "./fall_icon.png";
const RISE_ICON = "./rise_icon.png";

const SW = 500;
const SH = 400;

const imgMap = {
  [FALL_ICON]: null,
  [RISE_ICON]: null,
};

init();

async function init() {
  for (i in imgMap) {
    if (!imgMap[i]) {
      await loadImg(i);
    }
  }

  ctx.fillStyle = "#171A1F";
  ctx.fillRect(0, 0, SW, SH);
  ctx.lineWidth = 1;
  ctx.moveTo(0, SH * 0.5)
  ctx.lineTo(SW, SH * 0.5)
  ctx.moveTo(SW * 0.5, 0)
  ctx.lineTo(SW * 0.5, SH)
  
  ctx.strokeStyle = "#f0f0f0"
  ctx.stroke()

  drawPanel(ctx, {
    title: "鏈上數據",
    sub: "轉出錢包",
    num: "$ 198,643.432",
    action: "看多",
  }, SW * 0.5, SH * 0.5);

  drawPanel(ctx, {
    title: "鏈上數據",
    sub: "轉出錢包",
    num: "$ 19.432",
    action: "看多",
  }, SW * 0.7, SH * 0.8);

  drawPanel(ctx, {
    title: "鏈上數據",
    sub: "轉出錢包",
    num: "$ 3,198,643,643.432",
    action: "看多",
  }, SW * 0.3, SH * 0.8);
}

function drawPanel(ctx, obj, sx, sy) {

  ctx.font = "bold 12px Arial";
  let max = 0;
  for (let i in obj) {
    let len = ctx.measureText(obj[i]).width;
    if (len > max) {
      max = len;
    }
  }

  let xPadding = 30;
  let yPadding = 18;
  let width = max + 2 * xPadding;
  let height = 54 + 2 * yPadding;

  let x = sx - width * 0.5;
  let y = sy - height - 20;

  drawFrame(ctx, x, y, width, height, 10, 30, 20);

  ctx.fillStyle = "#B1B6C6";
  ctx.fillText(obj.title, xPadding + x, yPadding + y);

  ctx.fillStyle = "#FFFFFF";
  ctx.fillText(obj.sub, xPadding + x, yPadding + y + 20);

  ctx.fillStyle = "#FFFFFF";
  ctx.fillText(obj.num, xPadding + x, yPadding + y + 40);

  ctx.fillStyle = "#0DCB81";
  ctx.fillText(obj.action, xPadding + x + 16, yPadding + y + 60);

  ctx.drawImage(
    imgMap[RISE_ICON],
    0,
    0,
    imgMap[RISE_ICON].width,
    imgMap[RISE_ICON].height,
    xPadding + x,
    yPadding + y + 50,
    10,
    10
  );
}

function loadImg(src) {
  return new Promise((resolve) => {
    const img = new Image();
    img.onload = () => {
      imgMap[src] = img;
      resolve();
    };
    img.src = src;
  });
}

function drawFrame(ctx, x, y, width, height, radius, arrowWidth, arrowHeight) {
  ctx.beginPath();
  ctx.strokeStyle = "#F6BC2F";

  ctx.moveTo(x + radius, y);
  ctx.lineTo(x + width - radius, y);
  ctx.arcTo(x + width, y, x + width, y + radius, radius);
  ctx.lineTo(x + width, y + height - radius);
  ctx.arcTo(x + width, y + height, x + width - radius, y + height, radius);

  ctx.lineTo(x + width / 2 + arrowWidth / 2, y + height);

  ctx.lineTo(x + width / 2 + arrowWidth * 0.25, y + height + arrowHeight * 0.5);
  ctx.quadraticCurveTo(
    x + width / 2,
    y + height + arrowHeight,
    x + width / 2 - arrowWidth * 0.25,
    y + height + arrowHeight * 0.5
  );


  ctx.lineTo(x + width / 2 - arrowWidth / 2, y + height);

  ctx.lineTo(x + radius, y + height);

  ctx.arcTo(x, y + height, x, y + height - radius, radius);
  ctx.lineTo(x, y + radius);
  ctx.arcTo(x, y, x + radius, y, radius);
  
  ctx.lineWidth = 2;
  ctx.fillStyle = "#1B1D29";
  ctx.stroke();
  ctx.fill();
}



function toBig(ary, v){
    for(let i = 1; i < ary.length; i++){
        if(v){
            if(ary[i].timestamp < ary[i-1].timestamp){
                console.log(i, "错乱");
                return;
            }
        }
    }
    console.log("ok")
}